<template>
    <view>
      <uni-popup ref="popup" :animation="true" type="bottom">
        <view class="popup-content">
            <view class="title">
              <view class="text">登录注册账号，观看更多视频</view>
              <image class="close" src="../../static/images/close.png" @tap="close"></image>
            </view>
            <input class="inputemail" v-model="emailValue" placeholder="填写邮箱用于作为您唯一的账号">
            <view class="Verification">
              <input class="code" v-model="emailcode" placeholder="请填写验证码">
              <view class="clickget" v-show="showcodebuttom == 0" @tap="getcode">获取验证码</view>
              <view class="Countdown" v-show="showcodebuttom == 1">{{timevalue}}S</view>
            </view>
            <view class="submit" @tap="submit">登录/注册</view>
        </view>
      </uni-popup>
    </view>
  </template>
  
  <script>
  import { getrequest, postrequest } from '../../util/api'
  export default {
    data() {
			return {
				channelNo:'',
				triggered: false,  //下拉加载控制变量
				lists:[],// 首页的列表
				liststotal:'', //视频总数
				page:1, // 请求视频的页数
				emailValue:'', //邮箱18581343206@163.com
				emailcode:'', // 邮箱验证码
				userId:'', //用户id
				showcodebuttom:0, //点击获取验证码倒计时
				timevalue:60,
			}
		},
    // components: { emailiPopup },
    methods: {
              // 打开弹框
      open() {
        this.$refs.popup.open()
      },
      // 关闭弹框
      close() {
        this.$refs.popup.close()
      },
      // 获取验证码
      async getcode(){
        // 邮箱进行验证
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!this.emailValue.match(emailRegex)) {
          uni.showToast({
            title:'请填写正确的邮箱',
            duration: 1500,
            icon:'none',
          })
          return
        }
        // 请求code验证码
				let params = {
					mail:this.emailValue,
				}
        const res = await getrequest('/api/user/mail_send_code',params)
        console.log('res',res)
        if(res.status == 200){
          uni.showToast({
            title:'邮箱验证发送成功',
            duration: 1500,
            icon:'none',
          })
          // 请求倒计时
          this.showcodebuttom = 1
          console.log('aa',this.showcodebuttom)
          setInterval(()=>{
            if(this.timevalue >= 1){
              this.timevalue --
            }else{
              this.timevalue = 60
              this.showcodebuttom = 0
            }
          },1000)
        }
      },
      // 登录/注册
      async submit(){
        let params = {
          // 18581343206@163.com
					mail:this.emailValue,
          code:this.emailcode,
				}
        const res = await postrequest('/api/user/verify_mail_code',params)
        console.log('res',res)
        if(res.msg == 'success'){
          // 先关闭弹框
          this.close()
          // 强制刷新页面
          this.$forceUpdate()
          this.userId = res.data.userId
          uni.setStorageSync('userId', this.userId); 
          uni.setStorageSync('token', res.data.token);
          uni.setStorageSync('email', this.emailValue);

        }else{
          uni.showToast({
            title:'邮箱或者验证码填写错误，请重新填写',
            duration: 1500,
            icon:'none',
          })
        }
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
	  .popup-content {
    width: 750rpx;
    height: 700rpx;
    border-radius: 20rpx 20rpx 0 0;
    font-family: '思源黑体';
    z-index: 999;
    // margin-bottom: 100rpx;
    background: linear-gradient(180deg, rgba(204, 224, 249, 1) 0%, rgba(255, 255, 255, 1) 100%);
    .title{
      width: 750rpx;
      padding-top: 30rpx;
      height: 40rpx;
      display: flex;
      .text{
        width: 550rpx;
        height: 40rpx;
        // border: 1px solid black;
        font-size: 18px;
        line-height: 40rpx;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        margin: 0 0 0 70rpx;
      }
      .close{
        width: 34rpx;
        height:34rpx;
        margin: 4rpx 0 0 50rpx;
      }
    }
    .inputemail{
      width: 660rpx;
      height: 80rpx;
      padding: 10rpx 20rpx;
      border: 1px solid rgba(166, 166, 166, 1);
      border-radius: 10rpx;
      margin: 0 auto;
      margin-top: 110rpx;
    }
    .Verification{
      width: 700rpx;
      height: 100rpx;
      margin: 0 auto;
      margin-top: 40rpx;
      border: 1px solid rgba(166, 166, 166, 1);
      border-radius: 10rpx;
      display: flex;
      .code{
        width: 420rpx;
        height: 80rpx;
        padding: 10rpx 20rpx;
      }
      .clickget{
        width: 240rpx;
        height: 60rpx;
        border-left: 1px solid rgba(128, 128, 128, 1);
        margin-top: 20rpx;
        font-size: 32rpx;
        line-height: 60rpx;
        color: rgb(75, 81, 228);
        text-align: center;
      }
      .Countdown{
        width: 200rpx;
        height: 60rpx;
        border: 1px solid rgba(128, 128, 128, 1);
        margin-top: 20rpx;
        font-size: 32rpx;
        line-height: 60rpx;
        background-color: rgb(208, 208, 208);
        color: rgba(96, 58, 245, 1);
        border-radius: 10rpx;
        text-align: center;
      }
    }
    .submit{
      width: 660rpx;
      height: 100rpx;
      border-radius: 30px;
      background: rgb(75, 81, 228);
      margin: 0 auto;
      margin-top: 130rpx;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 100rpx;
      color: rgba(255, 255, 255, 1);
      text-align: center;

    }
  }
  </style>
  